<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"  name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>产品详情</title>
    <link rel="stylesheet" type="text/css" th:href="@{/pc/css/product_detail.css}">
    <script  th:src="@{/pc/js/jquery-1.8.2.min.js}" ></script>
    <script  th:src="@{/pc/js/zoom.js}" ></script>
    <script  th:src="@{/pc/js/slide.js}" ></script>
    <script  th:src="@{/pc/js/product_detail.js}" ></script>
</head>
<body>
    <div th:replace="pc/common/header :: header"></div>
    <div id="content">
        <div class="product-property">
            <div class="product-gallery">
                <div class="product-booth" id="product-booth">
                    <div class="booth-small" id="booth-small">
                        <img th:each="p,pStat : ${productDetail.pictureList}" th:if="${pStat.index == 0}" th:src="${p.url+'?imageView2/1/w/512/h/512/q/75'}" alt="" class="small-pic" id="small-pic">
                        <div id="mouse-bg" class="mouse-bg"></div>
                    </div>
                    <div class="booth-big" id="booth-big">
                        <img th:each="p,pStat : ${productDetail.pictureList}" th:if="${pStat.index == 0}" th:src="${p.url+'?imageView2/1/w/512/h/512/q/75'}" alt="" class="big-pic" id="big-pic">
                    </div>
                </div>
                <div class="product-thumb">
                    <a href="javascript:void(0)" class="thumb-left prev">
                        <img th:src="@{/pc/img/icon-left.png}"  alt="">
                    </a>
                    <ul class="thumb-pic">
                        <li th:each="p : ${productDetail.pictureList}"><img th:src="${p.url + '?imageView2/1/w/40/h/40/q/75'}" th:data-url="${p.url+'?imageView2/1/w/512/h/512/q/75'}" alt=""></li>
                    </ul>
                    <a href="javascript:void(0)" class="thumb-right next">
                        <img th:src="@{/pc/img/icon-right.png}"  alt="">
                    </a>
                </div>
            </div>
            <div class="product-wrap">
                <div class="product-title">
                    <div class="main-title" th:text="${productDetail.productName}"></div>
                </div>
                <div class="product-desc">
                    <div class="desc-info" th:text="${productDetail.productSubtitle}"></div>
                </div>
                <div class="product-promo">
                    <div class="product-price">
                        <span class="sell-price" th:text="${'¥' + #numbers.formatDecimal(productDetail.priceDiscount*productDetail.price,1,'COMMA',2,'POINT')}"></span>
                        <span class="orig-price" th:text="${'¥' + #numbers.formatDecimal(productDetail.price,1,'COMMA',2,'POINT')}"></span>
                    </div>
                    <div class="product-stock">
                        <span class="stock-title">库存：</span>
                        <span class="stock-num" th:text="${productDetail.inventoryQuantity}"></span>
                    </div>
                </div>
                <div class="product-spec">
                    <dl class="spec-info" th:if="${not #lists.isEmpty(productDetail.skuList)}" th:each="s : ${productDetail.skuList}">
                        <dt class="spec-title" th:text="${s.skuKeyName}">颜色</dt>
                        <dd class="spec-frame">
                            <ul class="spec-attr">
                                <li th:each="c : ${s.skuValueList}">
                                    <!--<img th:src="@{/pc/img/product.jpg}" alt="" class="attr-pic">-->
                                    <span class="attr-name" th:text="${c.skuValueName}"></span>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="sku-info" th:if="${not #lists.isEmpty(productDetail.skuValuePriceEtcList)}">
                        <dt>
                            <input th:each="s : ${productDetail.skuValuePriceEtcList}" type="text" class="attr-data"
                                   th:data-name="${s.skuValueName1+','+s.skuValueName2}"
                                   th:data-price="${s.skuValuePrice}"
                                   th:data-discount="${s.skuValuePriceDiscount}"
                                   th:data-stock="${s.skuValueInventoryQuantity}" hidden>
                        </dt>
                    </dl>
                    <dl class="spec-num">
                        <dt class="num-title">数量</dt>
                        <dd class="num-btn">
                            <a href="javascript:void(0)" class="reduce-num">
                                <img th:src="@{/pc/img/icon-reduce.png}" alt="">
                            </a>
                            <input type="text" class="num-value" th:value="${productDetail.dealQuantityMin}" th:min-num="${productDetail.dealQuantityMin}" th:max-num="${productDetail.dealQuantityMax}">
                            <a href="javascript:void(0)" class="add-num">
                                <img th:src="@{/pc/img/icon-add.png}" alt="">
                            </a>
                        </dd>
                    </dl>
                </div>
                <div class="product-buy">
                    <a href="javascript:void(0)" th:onclick="|addShoppingCart(${productDetail.id})|" class="buy-car">加入购物车</a>
                </div>
            </div>
        </div>
        <div class="product-detail">
           <div class="detail-left">
               <div class="detail-desc">
                   <div class="detail-title">
                       <ul class="type-info">
                           <li class="intro-item">
                               <a href="#info">
                                   <img th:src="@{/pc/img/pro-intro.png}" alt="">
                                   <span class="title-wd">产品介绍</span>
                                   <span class="title-bar"></span>
                               </a>
                           </li>
                           <li>
                               <a href="#spec">
                                   <img th:src="@{/pc/img/spec-pack.png}" alt="">
                                   <span>规格与包装</span>
                               </a>
                           </li>
                           <li>
                               <a href="#safe">
                                   <img th:src="@{/pc/img/sale-secu.png}" alt="">
                                   <span>售后保障</span>
                               </a>
                           </li>
                           <li>
                               <a href="#comment">
                                   <img th:src="@{/pc/img/pro-com.png}" alt="">
                                   <span>商品评价</span>
                               </a>
                           </li>
                       </ul>
                   </div>
                   <div class="detail-cont" id="info" th:utext="${productDetail.productDescription}"></div>
               </div>

               <div class="spec-desc" id="spec">
                   <div class="head-title">
                       <img th:src="@{/pc/img/spec-pack-active.png}" alt="">
                       <span class="title-wd">规格与包装</span>
                       <span class="title-bar"></span>
                   </div>
                   <div class="spec-cont">

                   </div>
               </div>
               <div class="safe-desc" id="safe">
                   <div class="head-title">
                       <img th:src="@{/pc/img/sale-secu-active.png}" alt="">
                       <span class="title-wd">售后保障</span>
                       <span class="title-bar"></span>
                   </div>
                   <div class="safe-cont">

                   </div>
               </div>
               <div class="comment-desc" id="comment">
                    <div>
                        <div class="head-title">
                            <img th:src="@{/pc/img/pro-com-active.png}" alt="">
                            <span class="title-wd">评价</span>
                            <span class="title-bar"></span>
                        </div>
                    </div>
                    <div class="comment-info">
                       <!-- <div class="comment-item" th:each="p : ${productReviews.list}">
                            <div class="comment-user">
                                <ul class="user-info">
                                    <li class="head-port">
                                        <img th:src="${p.avatar}" alt="">
                                    </li>
                                    <li class="user-name" th:text="${p.username}"></li>
                                    <li class="create-time" th:text="${p.date}"></li>
                                </ul>
                            </div>
                            <div class="comment-cont">
                                <div class="comment-wd" th:text="${p.content}"></div>
                                <ul class="comment-pic">
                                    <li th:each="pic : ${p.picUrlList}">
                                        <img th:src="${pic + '?imageView2/1/w/100/h/55/q/75'}" th:data-url="${pic}" alt="">
                                    </li>
                                </ul>
                                <div class="booth-large">
                                    <img src="" alt="">
                                </div>
                                <div class="reply" th:each="r : ${p.replyList}">
                                    <div class="merch-reply" th:if="${r.userId != p.userId}">
                                        <div class="reply-source">
                                            <span class="reply-time" th:text="${r.date}"></span>
                                            <span class="reply-name" th:text="${r.username}"></span>
                                        </div>
                                        <div class="reply-cont" th:text="${r.content}"></div>
                                    </div>
                                    <div class="reply-item" th:if="${r.userId == p.userId}">
                                        <div class="user-reply">
                                            <div class="user-time" th:text="${r.date}"></div>
                                            <div class="user-cont" th:text="${r.content}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-page" th:if="${productReviews.pages != 0 }">
                            <a th:if="${page > 1}" th:href="${'?productId=' + productDetail.id + '&page=' + (page-1)}" class="prev-page">上一页</a>
                            <a th:if="${page <= 1}" href="javascript:void(0)" class="prev-page">上一页</a>
                            <span class="page-num" th:text="${page + '/' + productReviews.pages}"></span>
                            <a th:if="${page < productReviews.pages}" th:href="${'?productId=' + productDetail.id + '&page=' + (page+1)}" class="next-page">下一页</a>
                            <a th:if="${page >= productReviews.pages}" href="javascript:void(0)" class="next-page">下一页</a>
                        </div>-->
                    </div>
               </div>
           </div>
           <div class="detail-right">
               <div class="rcm-info">
                   <div class="head-title">
                       <img th:src="@{/pc/img/rcm-pro.png}" alt="">
                       <span class="title-wd">推荐产品</span>
                       <span class="title-bar"></span>
                   </div>
                   <div class="product-list">
                       <ul class="product-item" th:each="p : ${productListRecommend}">
                               <li class="item-pic">
                                   <a th:href="'?productId='+ ${p.id}"><img th:src="${p.picUrl+'?imageView2/1/w/166/h/166/q/75'}" alt=""></a>
                               </li>
                               <li class="item-title">
                                   <a th:href="'?productId='+ ${p.id}" th:text="${p.productName}"></a>
                               </li>
                               <li class="item-price">
                                   <a th:href="'?productId='+ ${p.id}" class="sell-price">¥89.09</a>
                                   <a th:href="'?productId='+ ${p.id}" class="orig-price">¥89.09</a>
                               </li>
                       </ul>
                   </div>
               </div>
               <div class="new-info">
                   <div class="head-title">
                       <img th:src="@{/pc/img/new-pro.jpg}" alt="">
                       <span class="title-wd">最新上架</span>
                       <span class="title-bar"></span>
                   </div>
                   <div class="product-list">
                       <ul class="product-item" th:each="p : ${productListNew}">
                           <li class="item-pic">
                               <a th:href="'?productId='+ ${p.id}"><img th:src="${p.picUrl+'?imageView2/1/w/166/h/166/q/75'}" alt=""></a>
                           </li>
                           <li class="item-title">
                               <a th:href="'?productId='+ ${p.id}" th:text="${p.productName}"></a>
                           </li>
                           <li class="item-price">
                               <a th:href="'?productId='+ ${p.id}" class="sell-price">¥89.09</a>
                               <a th:href="'?productId='+ ${p.id}" class="orig-price">¥89.09</a>
                           </li>
                       </ul>
                   </div>
               </div>
           </div>
        </div>
        <div class="product-service">
            <ul class="service-item">
                <li class="service-pic">
                    <img th:src="@{/pc/img/icon-logistic.png}" alt="">
                </li>
                <li class="service-title">多仓直发，极速配送</li>
            </ul>
            <ul class="service-item">
                <li class="service-pic">
                    <img th:src="@{/pc/img/icon-assure.png}" alt="">
                </li>
                <li class="service-title">正品低价，质量保证</li>
            </ul>
            <ul class="service-item">
                <li class="service-pic">
                    <img th:src="@{/pc/img/icon-sale.png}" alt="">
                </li>
                <li class="service-title">优质售后，放心下单</li>
            </ul>
        </div>
    </div>
    <div th:replace="pc/common/footer :: footer"></div>
    <script th:inline="javascript">
       var product_id = [[${productDetail.id}]];
       var page_no = 1;
       var page_total = 2;
       var limit = 3;
       $(function (){
           commentPage(page_no);
       })

       function commentPage(page){
           if((page > page_total) || page < page_no){
               return false;
           }
           var param = {
               productId: product_id,
               offset: (page-1)*limit,
               limit: limit,
               requirePages: 1
           }
           $.ajax({
               type: "post",
               url: "/api/product_reviews/list",
               data: JSON.stringify(param),
               async: false,
               contentType:"application/json;charset=utf-8",
               dataType: "json",
               success: function (data) {
                   if (data.status == 0) {
                       var list = data.result.list;
                       var pages = data.result.pages;
                       page_total = pages;
                       var comment_html = '';
                       if(list.length > 0){
                           var data_value = {
                               list: list,
                               pages: pages,
                               page: page
                           };
                           comment_html = $("#commentTemp").render(data_value);
                       }
                       $(".comment-info").html(comment_html);

                   }
               }
           });
       }
    </script>
    <script type="text/x-jsrender" id="commentTemp">
         {{for list}}
             <div class="comment-item">
                    <div class="comment-user">
                        <ul class="user-info">
                            <li class="head-port">
                                <img src="{{:avatar}}" alt="">
                            </li>
                            <li class="user-name">{{:username}}</li>
                            <li class="create-time">{{:date}}</li>
                        </ul>
                    </div>
                    <div class="comment-cont">
                        <div class="comment-wd">{{:content}}</div>
                        <ul class="comment-pic">
                           {{for picUrlList}}
                               <li>
                                 <img src="{{:#data}}?imageView2/1/w/100/h/55/q/75" data-url="{{:#data}}" alt="">
                               </li>
                           {{/for}}
                        </ul>
                        <div class="booth-large">
                            <img src="" alt="">
                        </div>
                        {{for replyList}}
                              {{if userId != #parent.parent.data.userId}}
                                 <div class="merch-reply">
                                    <div class="reply-source">
                                        <span class="reply-time">{{:date}}</span>
                                        <span class="reply-name">{{:username}}</span>
                                    </div>
                                    <div class="reply-cont">{{:content}}</div>
                                  </div>
                              {{/if}}
                              {{if userId == #parent.parent.data.userId}}
                                <div class="reply-item">
                                    <div class="user-reply">
                                        <div class="user-time">{{:date}}</div>
                                        <div class="user-cont">{{:content}}</div>
                                    </div>
                                </div>
                              {{/if}}
                        {{/for}}
                    </div>
            </div>
        {{/for}}
        {{if list.length > 0}}
            <div class="comment-page">
                 <a  href="javascript:void(0)" onclick="commentPage({{:page-1}})" class="prev-page">上一页</a>
                 <span class="page-num">{{:page}}/{{:pages}}</span>
                 <a  href="javascript:void(0)" onclick="commentPage({{:page+1}})" class="next-page">下一页</a>
            </div>
        {{/if}}
    </script>
</body>
</html>